<template>
<div>
  <div class="Hxsliuxingsmall" v-for="item in arr1" :key="item.id" @click.stop="bumaopao()"> 
    <img :src="item.imgg1" class="imgliuxing">
    <a href="https://www.xiachufang.com/recipe_list/102187248/">
       <div class="liuxintname">{{item.titlename}}</div>
    </a>
   
  </div>
  <!--  二维码 -->
  <div class="erweima">
    <div class="erweititle">
      <span class="span1">手机扫一扫</span>
      <span class="icon">
        <img src="./img/xigua.png" >
      </span>
      <span class="span2 ">安装</span>
      <span class="span2 span3">下</span>
      <span class="span2 span4">厨房</span>
    </div>

    <div class="ma">
      <img src="./img/erwei.png">
    </div>
  </div>
</div>

</template>

<script>
export default {
  data() {
    return {
      data2:"",
      arr1: [
        {
          id:1,
          imgg1:
            "https://i2.chuimg.com/fc2e37f48a8611e6a9a10242ac110002_1776w_1184h.jpg?imageView2/1/w/300/h/140/interlace/1/q/90",
          titlename: "磅棒棒磅磅蛋糕",
        },
        {
          id:2,
          imgg1:
            "https://i2.chuimg.com/3178e4ec870111e6b87c0242ac110003_500w_750h.jpg?imageView2/1/w/300/h/140/interlace/1/q/90",
          titlename: "❤沙拉&甜品 篇",
        },
        {
          id:3,
          imgg1:
            "https://i2.chuimg.com/2bd85d1ef76e464696127a346d38c83e_3888w_2592h.jpg?imageView2/1/w/300/h/140/interlace/1/q/90",
          titlename: "糖水及饮品的封面",
        },
        {
          id:4,
          imgg1:
            "https://i2.chuimg.com/a7e31f44885011e6b87c0242ac110003_3872w_2592h.jpg?imageView2/1/w/300/h/140/interlace/1/q/90",
          titlename: "广式早茶",
        },
         {
           id:5,
          imgg1:
            "https://i2.chuimg.com/928446dc86f711e6a9a10242ac110002_427w_640h.jpg?imageView2/1/w/300/h/140/interlace/1/q/90",
          titlename: "KOI·1+1=夹心饼干的封面",
        },
         {
           id:6,
          imgg1:
            "https://i2.chuimg.com/440d339289b811e6b87c0242ac110003_2048w_1536h.jpg?imageView2/1/w/300/h/140/interlace/1/q/90",
          titlename: "优雅的小拇指",
        },
         {
           id:7,
          imgg1:
            "https://i2.chuimg.com/8dd6f74e8ace11e6b87c0242ac110003_1200w_900h.jpg?imageView2/1/w/300/h/140/interlace/1/q/90",
          titlename: "❤灰灰灰机 鸡肉篇",
        },
         {
           id:8,
          imgg1:
            "https://i2.chuimg.com/3083aa3c86fb11e6a9a10242ac110002_412w_550h.jpg?imageView2/1/w/300/h/140/interlace/1/q/90",
          titlename: "天真与闪电⚡️菜谱合集",
        },
         {
           id:9,
          imgg1:
            "https://i2.chuimg.com/97b549ca8a3b11e6a9a10242ac110002_3024w_3024h.jpg?imageView2/1/w/300/h/140/interlace/1/q/90",
          titlename: "❤猪牛羊肉 荤菜篇",
        },
         {
           id:10,
          imgg1:
            "https://i2.chuimg.com/d83a43b2875f11e6a9a10242ac110002_600w_451h.jpg?imageView2/1/w/300/h/140/interlace/1/q/90",
          titlename: "二餐",
        },
         {
           id:11,
          imgg1:
            "https://i2.chuimg.com/fc2e37f48a8611e6a9a10242ac110002_1776w_1184h.jpg?imageView2/1/w/300/h/140/interlace/1/q/90",
          titlename: "蔬菜大乱炖",
        },
        
       
      ],
    };
  },
  methods:{
    bumaopao(){},
  }
  
};
</script>


<style lang="scss" scoped>
.Hxsliuxingsmall{
  width: 303px;
  height: 206px;
  // background-color: violet;
  margin-top: 13px;
  margin-left: 20px;
  margin-bottom: 28px;

}
.imgliuxing{
  width: 100%;
  height: 80%;
}
.imgliuxing:hover{
  transform: scale(1.2);
}
.liuxintname{
  text-align: center;
  line-height: 50px;
  font-size: 18px;
}
.liuxintname:hover{
  color: rgb(81, 81, 236);
}
.erweima{
  width: 318px;
  height: 279px;
  border: 3px solid rgb(190, 186, 186);
  margin-top: 59px;
}
.erweititle{
  padding-top: 15px;
}
.erweititle .span1{
  margin-left: 23px;
  font-size: 19px;
}
.span2{
   font-size: 19px;
   margin-left: 3px;
}
.span3{
  color: #9ED7E3;
}
.span4{
  color: #E44539;
}

.icon img{
  width: 37px;
  height: 36px;
}
.icon{
  margin-left: 12px;
  margin-right: 12px;
}

.ma img{
  width: 230px;
  height: 170px;
  margin-top: 30px;
  margin-left: 45px;
}
</style>
